
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--bootstrap-->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

  <!--My Styles-->
  <link href="<?php echo base_url();?>/css/search-form.css" rel="stylesheet" type="text/css" />

  <!--jqueryUI-->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/blitzer/jquery-ui.min.css" />

  <!--cdn google-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

  <!--bootstrap-->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

  <!--jquery datepicker-->
  <script type="text/javascript" src="<?php echo base_url();?>/js/show_datepicker.js"></script>

  <!-- bootstrap3-typehead -->
  <script type="text/javascript" src="<?php echo base_url();?>/js/bootstrap3-typeahead.js"></script>

</head>
<body>

  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-calendar"></span> Travel itinerary</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-book"></span> Booking <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li role="presentation" class="dropdown-header">Traffic</li>
            <li><a href="#"><span class="glyphicon glyphicon-plane"></span>  Plane</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-road"></span>  Train</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-tree-conifer"></span>  Taxi</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">Place</li>
            <li><a href="#"><span class="glyphicon glyphicon-cutlery"></span>  Hotel</a></li>
          </ul>
        </li>
      </ul>
      <form id="custom-search-form" class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input id="SearchString" name="SearchString" type="text" class="form-control search-query" size="35" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-search"></span>
        </button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Setting <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Logout</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>



  <div class="row">

    <div class="col-lg-2">

    </div>

    <label for="typeahead">search</label>
    <input type="text" id="typeahead" name="search" data-provide="typeahead">

    <br>

    <label for="">fix code</label>
    <input type="text" style="margin: 0 auto;" data-provide="typeahead" data-items="4"
    data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'
    >

  </div>

  <div class="row">

  </div>

  <hr />

  <div class="row">
    <div class="col-lg-2">
    </div>
    <div class="col-lg-9">
      <?php 

      $length = count($results);

      for ($i=0; $i < $length - 1; $i++) { 
        echo $results[$i] . '<br />';
      }
     // echo $results;

    // echo json_encode($json);

    // foreach ($results as $key => $value) 
    // {
    //    print "$key holds $value\n";
    // }

    // echo $results->array_keys();
    // echo json_encode($results);

      ?>
    </div>

  </div>

  <input type="button" name="" value="TestJson">



  <script type="text/javascript">  

    // var arrJsonObj = <?php echo json_encode($results); ?>;
    // var dataset = JSON.parseJSON(arrJsonObj);
    // var dataset = ["a", "b", "c"];
    // var dataset = ["name":"a", "name":"b", "name":"c"];

    // var tan = 'abc';

    $(function(){

      $("#typeahead").typeahead({
        source: function(query)
        {
          var result = [];
          $.ajax({
            url: "http://localhost:1234/example.com/index.php/category_controller/source",
            type: 'POST',
            data: 'search=' + query,
            dataType: 'JSON',
            async: false,
            success: function(data)
            {
              // alert(data);
              result = data;
              // typeahead.process(data);
            }
          });
          return result;
        }
      });

    });

  </script>


  <script type="text/javascript">

    $(document).ready(function() {

      $("input[value='TestJson']").click(function(event) {
        /* Act on the event */
      // var dataset = ["a", "b", "c"];

      // var dataset = ["name":"a", "name":"b", "name":"c"];
      // alert($tan);

      // var dataset = '{"result":true,"count":1}';
      // var obj = JSON.parse(dataset);
      // alert(obj.count);
    });

    });

  </script>


</body>
</html>